<script>
import doing from "../../components/practice/doing.vue"
import request from "../../../utils/request"
import { showToast } from "@/utils"

export default {
  name: "practice",
  components: { doing },
  data() {
    return {
      pagination: {
        current: 1,
        size: 10,
      },
      wordList: [],
      currentIndex: 0,
      maxPage: 0,
      queryParams: {
        thesaurusId: "",
      },
    }
  },
  computed: {
    currentWordItem() {
      const item = this.wordList[this.currentIndex]
      return item ? item : {}
    },
  },
  onLoad(query) {
    this.pagination.current = Number.parseInt(query.current)
    this.queryParams.thesaurusId = query.thesaurusId
    //动态设置页面标题
    uni.setNavigationBarTitle({
      title: query.thesaurusName,
    })
    this.getWordList(query.wordId)
  },
  methods: {
    async nextWord() {
      //当前列表索引加一
      if (this.currentIndex < this.wordList.length - 1) {
        this.currentIndex++
        //翻页
      } else if (this.pagination.current < this.maxPage) {
        this.pagination.current++
        this.wordList = []
        this.currentIndex = 0
        await this.getWordList()
        //返回到单元列表页面
      } else {
        uni.navigateBack({
          delta: 1,
        })
      }
    },
    async prevWord() {
      //当前列表索引减一
      if (this.currentIndex > 0) {
        this.currentIndex--
        //翻页
      } else if (this.pagination.current > 1) {
        this.pagination.current--
        this.wordList = []
        this.currentIndex = 0
        await this.getWordList()
				//已经是第一页了
      } else {
				showToast.default("已经是第一页了")
			}
    },
    getWordList() {
      return new Promise(async (resolve, reject) => {
        const { total, records } = await request({
          url: "userWordsRecord/getWordList",
          data: {
            ...this.pagination,
            ...this.queryParams,
          },
          errorHandle: true,
          showLoading: true,
        })
        //最多有多少页
        this.maxPage = Math.ceil(total / this.pagination.size)
        this.wordList = records
      })
    },
  },
}
</script>

<template>
  <view class="page">
    <view class="header">
      <view class="process-bar">
        <view class="content" :style="'width:' + (currentIndex / pagination.size) * 100 + '%'"></view>
      </view>
      <view class="title">
        <text>Unit\t</text>
        <text>{{ pagination.current }}</text>
      </view>
    </view>
    <doing
      height="calc(100vh - 132rpx)"
      @nextWord="nextWord"
      @prevWord="prevWord"
      :currentWordItem="currentWordItem"
      practice-mode="英考中"
      :thesaurus-id="queryParams.thesaurusId"
    ></doing>
  </view>
</template>

<style scoped lang="scss">
.page {
  .header {
    .process-bar {
      height: 20rpx;
      background: var(--theme-color-light);
      > .content {
        width: 0;
        height: 20rpx;
        background: var(--theme-color);
      }
    }
    .title {
      padding: 30rpx;
      font-size: 40rpx;
      font-weight: bold;
    }
  }
}
</style>
